<template>
  <div class="home">
    <nav-bar>
      <div slot="center">首页</div>   
    </nav-bar>
    <img src="../../assets/img/tabbarimg.png" alt="" class="tabbar-img">
    <home-recomend></home-recomend>
    <home-reture></home-reture>
    <tab-control :titles="['精选','热门','收藏']" class="tab-control"/>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
    <div>文字</div>
     <!-- <swiper :options="swiperOption">
        <swiper-slide v-for="(slide, key) in swiperList" :key="key" >
            <div align="center"><img :src="slide" alt=""></div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div> -->
    <!-- </swiper> -->
  </div>
</template>

<script>
//     import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
//     import NavBar from 'components/common/navbar/NavBar'
// export default {
//     name:'Home',
//     components: {
//         NavBar,  
//         Swiper,
//         SwiperSlide
//     },
//     data(){
//         return {
//             swiperList :[
//                 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
//                 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
//                 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
//                 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
//                 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
//                 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
//             ],
//             swiperOption: {
//                 autoplay: {
//                     disableOnInteraction: false,  // 用户操作swiper之后，是否禁止autoplay
//                     delay: 3000, // 自动切换的时间间隔（单位ms）
//                 },
//                 initialSlide: 0,
//                 loop: true,
//                 pagination: { el: '.swiper-pagination' }, // 分页按钮
//                 paginationClickable: true,
//                 onSlideChangeEnd: swiper => {
//                 //console.log('onSlideChangeEnd', swiper.realIndex)
//                 }
//             }
//         }
//     }
// }
// 引入完成
    // import Swiper from 'vue-awesome-swiper'
    // import SwiperSlide from 'vue-awesome-swiper'
    import NavBar from 'components/common/navbar/NavBar'
    import HomeRecomend from './childcomps/HomeRecomend'
    import HomeReture from './childcomps/HomeReture'
    import TabControl from 'components/common/TabControl'
    
    export default {
    name: 'Home',
    components: {
      NavBar,
      HomeRecomend,
      HomeReture,
      TabControl
    },    
    // data() {
    //   return {
    //         swiperList :[
    //             'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    //             'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    //             'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    //         ],
    //         swiperOption: {
    //             autoplay: {
    //                 disableOnInteraction: false,  // 用户操作swiper之后，是否禁止autoplay
    //                 delay: 3000, // 自动切换的时间间隔（单位ms）
    //             },
    //             initialSlide: 0,
    //             loop: true,
    //             pagination: { el: '.swiper-pagination' }, // 分页按钮
    //             paginationClickable: true,
    //             onSlideChangeEnd: swiper => {
    //             console.log('onSlideChangeEnd', swiper.realIndex)
    //             }
    //         }
    //     }
    // } 
   }
</script>
<style>
  .tabbar-img {
    width: 100%;
    vertical-align: middle;
    border: 0;
    margin: 0;
    padding: 0;
  }
  swiper-slide div img {
    width: 100px;
    flex: 1
  }
  swiper-slide div {
    display: flex;
  }
  .home {
    padding-bottom: 50px;
  }
  .tab-control {
    position: sticky;
    top: 44px;
  }
</style>